<template>
    <div >
         <div>
            <p>标题<input type="text" v-model='title'></p>  
            <p>内容<input type="text" v-model='desc'></p>
            <p><input type="radio" name='tp' ref='tp'>横版 <input type="radio" name='tp'>竖版</p>
         </div>
                <!-- <h1>{{claid}}</h1> -->
                <!-- <h1>{{setdata}}</h1> -->
    <div class="upload">
      <!-- 上传文件input做隐藏 -->
      <input  type="file" ref='upload_file' id="upload_file"  @change="fileChange($event)" multiple style="display:block"/>
      <!-- 展示图片div -->
      <div class="upload_warp_img" v-show="imgList.length!=0">
         <!-- 一个图片 -->
        <div class="upload_warp_img_div" v-for="(item,index) of imgList">
          <div class="upload_warp_img_div_top">
            <div class="upload_warp_img_div_text">
               {{item.file.name}}
               <!-- <br/>{{item.file.size}}<br/>{{item.file.src}} -->
            </div>
            <!-- 删除功能 -->
             <img src="../assets/img/del.png" class="upload_warp_img_div_del" @click="fileDel(index)" >
          </div>
          <!-- <h1>{{item.file.src}}</h1> -->
           <img :src="item.file.src"> 
        </div>
      </div>
    </div>    
     <button @click='upload'>上传</button>
  </div>
</template>

<script>
import qs from 'qs';
// import store from '../../assets/store/store.js'
    export default({
        data(){
            return {
               imgList: [],
                size: 0,
                title:'',
                desc:'',
                cid_arr:[]
            }
        },
        props:['claid','txt','setdata','arr'],
        methods:{
            upload(){
             event.preventDefault();//取消默认行为             
               if(this.$refs.tp.checked){
                 var tp=true;
               }else{
                 tp=false;
               }
               console.log(tp);
               var date=new Date().getFullYear().toString();
               console.log(date);
                    let formdata = new FormData();
                    // this.val[1]                                           
                if(this.txt=='上传'){
                    console.log('上传&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&');
                    formdata.append('clasId',this.claid);
                    formdata.append('title',this.title);
                    formdata.append('desc',this.desc);
                    formdata.append('type',true);
                    formdata.append('date','2018/12/11');
                    for(var i=0;i<this.$store.state.file.length;i++){
                        formdata.append('files',this.$store.state.file[i].file);
                    }
                    this.$store.state.isfile = true;
                    let config = {
                            headers: {
                                'Content-Type': 'multipart/form-data' , //之前说的以表单传数据的格式来传递fromdata                              
                            }
                        };
                    this.$http.post("http://125.210.160.93:8080/SmEdu/pass/clasPhot/add",
                    formdata, config).then( () => {  
                                        // this.$router.push({path:'/index'});
                                        //     //跳转并刷新首页    
                                        //     history.go(0);
                    // this.$router.push({path:'/index/reset?title=班级相册'})       ;
                    }).catch((error) =>{
                      console.log(error);
                    });
                        }else if(this.txt=='修改'){ 
                            this.setdata();
                            console.log('修改&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&');                
                    formdata.append('id',this.claid);
                    formdata.append( 'ids[]',this.arr);
                    formdata.append('title',this.title);
                    formdata.append('desc',this.desc);
                    formdata.append('type',true);
                    formdata.append('date','2018/12/11');
                    for(var i=0;i<this.$store.state.file.length;i++){
                        formdata.append('files',this.$store.state.file[i].file);
                    }
                    this.$store.state.isfile = true;
                    let config = {
                            headers: {
                                'Content-Type': 'multipart/form-data' , //之前说的以表单传数据的格式来传递fromdata                              
                            }
                        };
                    this.$http.post("http://125.210.160.93:8080/SmEdu/pass/clasPhot/update",
                    formdata, config).then( () => {  
                                        // this.$router.push({path:'/index'});
                                        //     //跳转并刷新首页    
                                        //     history.go(0);
                    // this.$router.push({path:'/index/reset?title=班级相册'})       ;
                    }).catch((error) =>{
                      console.log(error);
                    });
                        }
            
                   
          },
            // 点击触发上传事件
             fileClick() {
              document.getElementById('upload_file').click();
          },

          fileChange(el) {
              if (!el.target.files[0].size) return;
              // console.log(el.target.files);
              this.fileList(el.target);
              el.target.value = ''
            //   console.log(222);
          },
          fileList(fileList) {
              let files = fileList.files;
               console.log(files);
              for (let i = 0; i < files.length; i++) {
                  //判断是否为文件夹
                  //  console.log(333);
                  if (files[i].type != '') {
                      this.fileAdd(files[i]);
                  } else {
                      //文件夹处理
                      this.folders(fileList.items[i]);
                  }
              }
          },
          //文件夹处理
          folders(files) {
              let _this = this;
              //判断是否为原生file
              if (files.kind) {
                  files = files.webkitGetAsEntry();
              }
              files.createReader().readEntries(function (file) {
                  for (let i = 0; i < file.length; i++) {
                      if (file[i].isFile) {
                          _this.foldersAdd(file[i]);
                      } else {
                          _this.folders(file[i]);
                      }
                  }
              })
          },
          foldersAdd(entry) {
              let _this = this;
            //    console.log(444);
              entry.file(function (file) {
                  _this.fileAdd(file)
              })
          },
          fileAdd(file) {
              //总大小
              // 将图片文件放进数组保存在仓库里
              this.$store.state.file=this.imgList;
              this.size = this.size + file.size;
              //判断是否为图片文件             
              if (file.type.indexOf('image') == -1) {
                  file.src = 'wenjian.png';
                  this.imgList.push({
                      file
                  });
                  console.log(this.imgList);
              } else {
                  let reader = new FileReader();
                  reader.vue = this;
                  reader.readAsDataURL(file);
                  reader.onload = function () {
                      file.src = this.result;
                      this.vue.imgList.push({
                          file
                      });
                        // console.log(5552);
                  }
              }
          },
        //   删除图片
          fileDel(index) {
            //    console.log(666);
              this.size = this.size - this.imgList[index].file.size;//总大小
              this.imgList.splice(index, 1);
          },
        },
    })
</script>

<style scoped>
    .upload_warp_img_div_del {
      position: absolute;
      top: 6px;
      width: 16px;
      right: 4px;
    }

    .upload_warp_img_div_top {
      position: absolute;
      top: 0;
      width: 100%;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      text-align: left;
      color: #fff;
      font-size: 12px;
      text-indent: 4px;
    }

    .upload_warp_img_div_text {
      white-space: nowrap;
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .upload_warp_img_div img {
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
    }

    .upload_warp_img_div {
      position: relative;
      height: 100px;
      width: 95px;
      border: 1px solid #ccc;
      margin: 0px 10px 10px 0px;
      float: left;
      line-height: 100px;
      display: table-cell;
      text-align: center;
      background-color: #eee;
      cursor: pointer;
    }

    .upload_warp_img {
      border-top: 1px solid #D2D2D2;
      padding: 14px 0 0 14px;
      overflow: hidden
    }

    .upload_warp_text {
      text-align: left;
      margin-bottom: 10px;
      padding-top: 10px;
      text-indent: 14px;
      border-top: 1px solid #ccc;
      font-size: 14px;
    }

    .upload_warp_right {
      float: left;
      width: 57%;
      margin-left: 2%;
      height: 100%;
      border: 1px dashed #999;
      border-radius: 4px;
      line-height: 130px;
      color: #999;
    }

    .upload_warp_left img {
      margin-top: 32px;
    }

    .upload_warp_left {
      float: left;
      width: 40%;
      height: 100%;
      border: 1px dashed #999;
      border-radius: 4px;
      cursor: pointer;
    }

    .upload_warp {
      margin: 14px;
      height: 130px;
    }

    .upload {
      border: 1px solid #ccc;
      background-color: #fff;
      width: 100%;
      box-shadow: 0px 1px 0px #ccc;
      border-radius: 4px;
    }
</style>

